Documentation

Display Metal Price Bar

Please refer to this article for adding the Metal Price Bar to your website. If you have any queries, contact our support team.

Display Product Details & Price Breakup

Using Shopify Metafields, the Product Configuration & Price Breakup can be displayed on the Storefront. This feature is available on the Basic+ and the Advanced Plan. This is an Optional feature. If you have any queries, contact our support team.

In Shopify Admin Panel, select the Themes menu. Under the Actions drop-down of the currently published theme, select the Edit Code option. Search and open the file named product.liquid in the Theme Editor.

In case, your theme does not have a product.liquid file, search for main-product.liquid or product-template.liquid. The file names may differ from theme to theme.

Copy the below code to the top of the product.liquid file.

  <!-- [Live Gold Price Editor] Capture the Metafields data from Shopify -->
  {% capture 'variant_meta_fields' %}
    {% for variant in product.variants %}
      {{ variant.id | json }}: {{ variant.metafields.DI-GoldPrice.variant_additional_details | json }}  
      {% unless forloop.last %},{% endunless %}
    {% endfor %}
  {% endcapture %}
  

Copy the below code to the bottom of the product.liquid file.

  <!-- [Live Gold Price Editor] Populate the captured data onto UI. -->
  <script>
  
    const variantConfigs = { {{ variant_meta_fields }} };  
    const metalPriceConfig = {{ shop.metafields.DI-GoldPrice.addtional_shop_settings | json }};    
    const advancedStoneConfig = {{ shop.metafields.DI-GoldPrice.stone_pricing_slabs | json }} || [];
    const formulaDefaults = {{ shop.metafields.DI-GoldPrice.formula_defaults | json }} || {};

    console.log(variantConfigs);
    console.log(metalPriceConfig);
    console.log(advancedStoneConfig);
    console.log(formulaDefaults);
  </script>

  <script>

    //Populate the UI for the selected/default variant. 
    const firstAvailableVariantId = {{ product.selected_or_first_available_variant.id }};
    if(variantConfigs && variantConfigs[firstAvailableVariantId]) {
      updateProductDetails(firstAvailableVariantId);
      updatePriceBreakup(firstAvailableVariantId);  
    }
    
    //Populate the UI again when the User selects a different Variant. 
    document.addEventListener('change', function() {
      const url = new URL(document.URL);
      const variantId = url.searchParams.get("variant");
      
      if (variantId && !isNaN(variantId) && variantConfigs && variantConfigs[variantId]) {   
        updateProductDetails(variantId);
        updatePriceBreakup(variantId);
      }
    });
    
    function updateProductDetails(variantId) {
      console.log('Update Product Details. Variant: ' + variantId);
      const variantConfig = variantConfigs[variantId];
      
      //...Populate your UI here. 
      /** Example: 
       * 
       * document.getElementById('metal_weight').innerHTML = variantConfig.metal_weight;
       * 
       ** /
    }
    
    function updatePriceBreakup(variantId) {
      console.log('Update Price Breakup. Variant: ' + variantId);
      const variantConfig = variantConfigs[variantId];
      
      //...Populate your UI here. 
    }
  </script>
  

NOTE: The above code only fetches the variant configuration from Shopify. The code for Data Population should be implemented to display the Product Details and Price Breakup. Update the updateProductDetails and updatePriceBreakup functions to populate the desired details to your website.

Save the code and refresh your product page. Open the Developer Tools on the Browser. If the products are configured, the Variant Configurations will be displayed on the Developer Console.