Empire Theme: Dual Unit Prices (Kg & Lb) almost working, need a little help

Shopify Discussion
1

Hi,

I sell products by weight and it would be very useful to display prices in $/kg and $/lb. I currently have it all working but when dynamically changing variants, the math operation isn’t updating. The price reverts back to the same as $/kg and changes dynamically, just the math operation doesn’t recalculate. It works perfectly when I refresh the page though.

From product-price.liquid:

{% if variant.unit_price_measurement.reference_unit == 'kg' %}  
{% assign variant = product.selected_or_first_available_variant %}
 {% capture unit_pricelb %}<span class="{{ class_root }}__unit-pricelb--amount money" data-unit-pricelb-amount>{{ variant.unit_price | divided_by: 2.20462 | money }}</span>{% endcapture %}
<div
      class="
        {{ class_root }}__unit-price
        {% unless variant.unit_price_measurement %}hidden{% endunless %}
      "
      data-unit-pricelb
    >
   | {{ unit_pricelb }} / lb
    </div>
{% endif %}

From empire.js.liquid:

    this.variantFields = {
      $priceContainer: this.$details.find('[data-price-container]'),
      $priceMoney: this.$details.find('[data-price-container] [data-price]'),
      $compareAtPrice: this.$details.find('[data-price-compare-container]'),
      $compareAtPriceMoney: this.$details.find('[data-price-compare-container] [data-price-compare]'),
      $badge: this.$details.find('[data-badge-sales]'),
      $badgeRange: this.$details.find('[data-badge-sales-range]'),
      $badgeSingle: this.$details.find('[data-badge-sales-single]'),
      $sku: this.$details.find('[data-product-sku]'),
      stockLevels: this.$details[0].querySelectorAll('[data-stock-level]'),
      unitPrice: this.$details[0].querySelector('[data-unit-price]'),
      unitPricelb: this.$details[0].querySelector('[data-unit-pricelb]'),
      totalQuantity: this.$details[0].querySelector('[data-total-quantity]'),
      unitPriceAmount: this.$details[0].querySelector('[data-unit-price-amount]'),
      unitPriceAmountlb: this.$details[0].querySelector('[data-unit-pricelb-amount]'),
      unitPriceMeasure: this.$details[0].querySelector('[data-unit-price-measure]'),
      taxLine: this.$details[0].querySelector('[data-tax-line]'),
      hiddenComparePrice: this.$details[0].querySelector('[data-compare-price-hidden]'),
      hiddenCurrentPrice: this.$details[0].querySelector('[data-current-price-hidden]'),
      hiddenComparePriceRange: this.$details[0].querySelector('[data-compare-price-range-hidden]'),
      hiddenCurrentPriceRange: this.$details[0].querySelector('[data-current-price-range-hidden]')
    };

  _updateUnitPrice(variant) {
    if (this.variantFields.unitPrice && variant.unit_price_measurement) {
      this.variantFields.totalQuantity.innerHTML = `${variant.unit_price_measurement.quantity_value}${variant.unit_price_measurement.quantity_unit}`;
      this.variantFields.unitPriceAmount.innerHTML = Shopify.formatMoney(variant.unit_price, this.settings.money_format);
      this.variantFields.unitPriceAmountlb.innerHTML = Shopify.formatMoney(variant.unit_price, this.settings.money_format);
      
      if (variant.unit_price_measurement.reference_value === 1) {
        this.variantFields.unitPriceMeasure.innerHTML = variant.unit_price_measurement.reference_unit;
      } else {
        this.variantFields.unitPriceMeasure.innerHTML = `${variant.unit_price_measurement.reference_value}${variant.unit_price_measurement.reference_unit}`;
      }

      this.variantFields.unitPrice.classList.remove('hidden');
    } else if (this.variantFields.unitPrice) {
      this.variantFields.unitPrice.classList.add('hidden');
    }
    
    if (this.variantFields.taxLine) {
      if (variant.taxable) {
        this.variantFields.taxLine.classList.remove('hidden');
      } else {
        this.variantFields.taxLine.classList.add('hidden');
      }
    }
  }

I’ve already gone so far into making it work but I’m stuck at that last part. Once it works I would be happy to share all the code to implement it into other stores.

Can you help?

2

Found the solution. For anybody using the Empire theme that has unit pricing enabled you can display $/lb by modding the code like this:

From product-price.liquid (Add this code):

{% comment %}
*** START MODDED CODE LINE FOR UNIT PRICE LB
{% endcomment %}

{% if variant.unit_price_measurement.reference_unit == 'kg' %}  
{% assign variant = product.selected_or_first_available_variant %}
{% capture unit_pricelb %}{{ variant.unit_price | divided_by: 2.20462 | money }}{% endcapture %}

   | {{ unit_pricelb }} / lb
    

{% endif %}

{% comment %}
*** END MODDED CODE LINE FOR UNIT PRICE LB
{% endcomment %}

From empire.js.liquid (Modify the code to this):

_updateUnitPrice(variant) {
    if (this.variantFields.unitPrice && variant.unit_price_measurement) {
      this.variantFields.totalQuantity.innerHTML = `${variant.unit_price_measurement.quantity_value}${variant.unit_price_measurement.quantity_unit}`;
      this.variantFields.unitPriceAmount.innerHTML = Shopify.formatMoney(variant.unit_price, this.settings.money_format);
      this.variantFields.unitPriceAmountlb.innerHTML = Shopify.formatMoney(variant.unit_price / 2.20462, this.settings.money_format);

this.variantFields = {
      $priceContainer: this.$details.find('[data-price-container]'),
      $priceMoney: this.$details.find('[data-price-container] [data-price]'),
      $compareAtPrice: this.$details.find('[data-price-compare-container]'),
      $compareAtPriceMoney: this.$details.find('[data-price-compare-container] [data-price-compare]'),
      $badge: this.$details.find('[data-badge-sales]'),
      $badgeRange: this.$details.find('[data-badge-sales-range]'),
      $badgeSingle: this.$details.find('[data-badge-sales-single]'),
      $sku: this.$details.find('[data-product-sku]'),
      stockLevels: this.$details[0].querySelectorAll('[data-stock-level]'),
      unitPrice: this.$details[0].querySelector('[data-unit-price]'),
      unitPricelb: this.$details[0].querySelector('[data-unit-pricelb]'),
      totalQuantity: this.$details[0].querySelector('[data-total-quantity]'),
      unitPriceAmount: this.$details[0].querySelector('[data-unit-price-amount]'),
      unitPriceAmountlb: this.$details[0].querySelector('[data-unit-pricelb-amount]'),
      unitPriceMeasure: this.$details[0].querySelector('[data-unit-price-measure]'),
      taxLine: this.$details[0].querySelector('[data-tax-line]'),
      hiddenComparePrice: this.$details[0].querySelector('[data-compare-price-hidden]'),
      hiddenCurrentPrice: this.$details[0].querySelector('[data-current-price-hidden]'),
      hiddenComparePriceRange: this.$details[0].querySelector('[data-compare-price-range-hidden]'),
      hiddenCurrentPriceRange: this.$details[0].querySelector('[data-current-price-range-hidden]')

From en.default.json (Modify the code to this):

},
    "general": {
      "select_variant": "Please select a variant",
      "by_vendor": "by {{ vendor }}",
      "by_vendor_html": "by {{ vendor_link }}",
      "sku_html": "<strong>SKU<\/strong> {{ sku }}<\/span>",
      "customer_reviews_title": "Customer Reviews",
      "zoom": "Click to expand",
      "zoomTap": "Tap or pinch to zoom",
      "zoomTapMobile": "Tap to zoom",
      "discounts": "Discounts",
      "price_per_unit_html": "{{ total_quantity }} | {{ unit_price }} \/ {{ unit_measure }}",
      "price_per_unit1_html": "{{ unit_pricelb }}"
3

Result.png
Result.png1159×771 317 KB