PicklistOptions - Show Prices.md

This is a copy of the product-list.html file within the Cornerstone Theme template (built for the BigCommerce Stencil CMS). It has been modified to show product prices for each picklist item, using the Storefront GraphQL API.

When navigating in Cornerstone or another template you should find this file at the following path:(templates/components/common/products/product-list.html

See lines 36 - 61.

product-list.html

<div class="form-field" data-product-attribute="product-list">
  {{log this}}
  <label class="form-label form-label--alternate form-label--inlineSmall">
    {{display_name}}: <span data-option-value></span>
    {{#if required}}
      <small>{{lang 'common.required'}}</small>
    {{/if}}
  </label>
  <h1 style="display: block; font-size: 26px;">{{values.0.name}}</h1>
  {{#if values.0.image}}
    <ul class="productOptions-list">
      {{#unless required}}
        <li class="productOptions-list-item">
          <input class="form-radio" type="radio" name="attribute[{{id}}]" value="0" id="attribute_productlist_0_{{id}}" {{#unless defaultValue}}checked{{/unless}} required>
          <label class="form-label" for="attribute_productlist_0_{{id}}">{{lang 'products.none'}}</label>
        </li>
      {{/unless}}
      {{#each values}}
        <li class="productOptions-list-item" data-product-attribute-value="{{id}}">
          {{#if image}}
            <figure class="productOptions-list-item-figure">
              {{> components/common/responsive-img
                                image=image
                                class="productOptions-list-item-image"
                                lazyload='lazyload+lqip'
                            }}
            </figure>
          {{/if}}
          <div class="productOptions-list-item-content">
            <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_productlist_{{../id}}_{{id}}" data-product-id="{{data}}" {{#if selected}} checked data-default {{/if}} {{#if ../required}}required{{/if}}>
            <label data-product-attribute-value="{{id}}" class="form-label" for="attribute_productlist_{{../id}}_{{id}}">{{label}}</label>
          </div>
          <div class="productOptions-list-item-price product_id_{{data}}" style="display: table-cell;padding: 10px 30px;">
            <h1 style="font-size: 16px; font-weight: normal"></h1>
          </div>
          <script>
            fetch('/graphql', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                  'Content-Type': 'application/json',
                  'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjaWQiOjEsImNvcnMiOlsiaHR0cHM6Ly9iaWctcGljdHVyZS1wZXJwc2VjdGl2ZS5teWJpZ2NvbW1lcmNlLmNvbSIsImh0dHA6Ly9sb2NhbGhvc3Q6MzAwMCJdLCJlYXQiOjIwMDkwOTg5NjksImlhdCI6MTY5NTQxNDc0OCwiaXNzIjoiQkMiLCJzaWQiOjEwMDI4NTI4MDAsInN1YiI6Ijg2cXk2a3FjZTNwMWI0Ynd5ZXAxM2gzaTdnbnE5cmsiLCJzdWJfdHlwZSI6MiwidG9rZW5fdHlwZSI6MX0.IwfCgp13zEuB1jmcEUeo9gzn-LZDwJkTqFseqE8NwUv5A4ojFssW5KTiG12Gh9tOdCAd6rJNVqHS9qbyxHxiQw'
                },
                body: JSON.stringify({
                  query: `query {
                      site {
                          singleProduct: product(entityId: {{data}}) {
                              prices {
                                  price {
                                      value
                                  }
                              }
                          }
                      }
                  }`
                })
              }).then(res => res.json()).then(responseData => {
                document.querySelector('.productOptions-list-item-price.product_id_{{data}} h1').textContent = `$${responseData.data.site.singleProduct.prices.price.value}.00`;
              })
              .catch(error => console.error(error));
          </script>
        </li>
      {{/each}}
    </ul>
  {{else}}
    {{#unless required}}
      <input class="form-radio" type="radio" name="attribute[{{id}}]" value="0" id="attribute_productlist_0_{{id}}" {{#unless defaultValue}}checked{{/unless}}>
      <label class="form-label" for="attribute_productlist_0_{{id}}">{{lang 'products.none'}}</label>
    {{/unless}}
    {{#each values}}
      <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_productlist_{{../id}}_{{id}}" data-product-id="{{data}}" {{#if selected}} checked data-default {{/if}} {{#if ../required}}required{{/if}}>
      <label data-product-attribute-value="{{id}}" class="form-label" for="attribute_productlist_{{../id}}_{{id}}">{{label}}</label>
    {{/each}}
  {{/if}}
</div>