https://github.com/obrien-k/multi-sf-cart

This is a modification for the bigcommerce/cornerstone theme to display multiple products within the same PDP. Check out my article for more info on the BigCommerce Developer Blog!
https://github.com/obrien-k/multi-sf-cart

Last synced: 12 days ago
JSON representation

This is a modification for the bigcommerce/cornerstone theme to display multiple products within the same PDP. Check out my article for more info on the BigCommerce Developer Blog!

• Host: GitHub
• URL: https://github.com/obrien-k/multi-sf-cart
• Owner: obrien-k
• License: mit
• Created: 2020-02-04T21:10:15.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-10T19:55:10.000Z (over 1 year ago)
• Last Synced: 2024-10-12T07:14:38.460Z (27 days ago)
• Language: HTML
• Homepage: https://medium.com/bigcommerce-developer-blog/using-bigcommerce-storefront-apis-to-create-custom-product-display-page-experiences-72ed3fbf7b23
• Size: 41.2 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Cornerstone

This modification of [BigCommerce's](https://github.com/bigcommerce/) [Cornerstone](https://github.com/bigcommerce/cornerstone) theme includes a custom product page called "multi-layout" which uses a minified version of [product-view.html](https://github.com/bigcommerce/cornerstone/blob/master/templates/components/products/product-view.html). It displays a "Combo to Cart" button for placeholder product IDs to all be added to the cart. It utilizes BigCommerce's Storefront Cart and GraphQL APIs, as well as additional custom JS and CSS.

Modified theme files:

```

- /assets

  - /js

   - app.js*

   - /theme

    - custom.js*

  - /scss

   - multi-layout.scss*

   - theme.scss*

- /templates

 - /components

  - /custom*

   - multi-button.html*

   - multi-view.html*

 - /pages

  - /custom*

   - multi-layout.html*

```

To apply this to a product on your store you'll need to include the custom field "is_bundled" with a value of true, as well as "foo" with the value for any Product ID you want added to cart and displayed on the page. Apply the "multi-layout.html" custom template to that product, and the changes should be seen on your storefront.

This repository was created for the article, ["Using Storefront APIs to Create Custom Product Display Page Experiences"](https://medium.com/bigcommerce-developer-blog/using-bigcommerce-storefront-apis-to-create-custom-product-display-page-experiences-72ed3fbf7b23).