Недавно я построил свой магазин ( whitewolf.co.za ) с помощью Shopify и установил приложение, которое автоматически переключает валюту с моей родной валюты (ZAR) на любую другую валюту, которую я выбираю (USD , EUR et c). У меня есть конвертер валют, расположенный в нижней части моего рабочего стола (и мобильного устройства), а затем в слайд-меню также на мобильном телефоне. Он доступен на сайте.
Теперь проблема возникает с тремя буквами после цены продукта, которые называются кодом ISO (USD, ZAR, EUR и т. Д. c.) Мне нужно удалить эти три буквы и просто поставьте знак перед ценой ($, € или R). Чтобы быть ясным: цена в настоящее время отображается как R245.00 ZAR, и мне нужно, чтобы она была только R245. (Если бы вы также могли удалить десятичные дроби, это было бы здорово).
Служба поддержки не хочет помогать и говорит, что вам нужен эксперт, чтобы исправить это, хотя они создали приложение.
Я добавил 4 штуки JS, которые я вижу в Shopify. Они могут быть в правильном порядке, а могут и не быть, поскольку я очень мало знаю о JS. Также может быть HTML (жидкость) в JS, которого там не должно быть. Я думаю, вы измените код ISO, используя первую часть JS. Если вам еще что-то нужно, оставьте, пожалуйста, комментарий, и я его добавлю.
//1st part of JS (
<script>
{%- comment -%} common data {%- endcomment -%}
window.BOLD = window.BOLD || {};
window.BOLD.common = window.BOLD.common || {};
window.BOLD.common.Shopify = window.BOLD.common.Shopify || {};
window.BOLD.common.Shopify.shop = {
domain: '{{ shop.domain }}',
permanent_domain: '{{ shop.permanent_domain }}',
url: '{{ shop.url }}',
secure_url: '{{ shop.secure_url }}',
money_format: {{ shop.money_format | json }},
currency: {{ shop.currency | json }}
};
window.BOLD.common.Shopify.customer = {
id: {{ customer.id | json }},
tags: {{ customer.tags | json }},
};
window.BOLD.common.Shopify.cart = {{ cart | json }};
window.BOLD.common.template = '{{ template | split: "." | first }}';
{%- comment -%} common functions {%- endcomment -%}
window.BOLD.common.Shopify.formatMoney = function(money, format) {
function n(t, e) {
return "undefined" == typeof t ? e : t
}
function r(t, e, r, i) {
if (e = n(e, 2),
r = n(r, ","),
i = n(i, "."),
isNaN(t) || null == t)
return 0;
t = (t / 100).toFixed(e);
var o = t.split(".")
, a = o[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + r)
, s = o[1] ? i + o[1] : "";
return a + s
}
"string" == typeof money && (money = money.replace(".", ""));
var i = ""
, o = /\{\{\s*(\w+)\s*\}\}/
, a = format || window.BOLD.common.Shopify.shop.money_format || window.Shopify.money_format || "$ {% raw %}{{ amount }}{% endraw %}";
switch (a.match(o)[1]) {
case "amount":
i = r(money, 2, ",", ".");
break;
case "amount_no_decimals":
i = r(money, 0, ",", ".");
break;
case "amount_with_comma_separator":
i = r(money, 2, ".", ",");
break;
case "amount_no_decimals_with_comma_separator":
i = r(money, 0, ".", ",");
break;
case "amount_with_space_separator":
i = r(money, 2, " ", ",");
break;
case "amount_no_decimals_with_space_separator":
i = r(money, 0, " ", ",");
break;
case "amount_with_apostrophe_separator":
i = r(money, 2, "'", ".");
break;
}
return a.replace(o, i);
};
window.BOLD.common.Shopify.saveProduct = function (handle, product) {
if (typeof handle === 'string' && typeof window.BOLD.common.Shopify.products[handle] === 'undefined') {
if (typeof product === 'number') {
window.BOLD.common.Shopify.handles[product] = handle;
product = { id: product };
}
window.BOLD.common.Shopify.products[handle] = product;
}
};
window.BOLD.common.Shopify.saveVariant = function (variant_id, variant) {
if (typeof variant_id === 'number' && typeof window.BOLD.common.Shopify.variants[variant_id] === 'undefined') {
window.BOLD.common.Shopify.variants[variant_id] = variant;
}
};
{%- comment -%} product data {%- endcomment -%}
window.BOLD.common.Shopify.products = window.BOLD.common.Shopify.products || {};
window.BOLD.common.Shopify.variants = window.BOLD.common.Shopify.variants || {};
window.BOLD.common.Shopify.handles = window.BOLD.common.Shopify.handles || {};
{%- if template == 'product' -%}
window.BOLD.common.Shopify.handle = {{ product.handle | json }}
{%- endif -%}
{%- comment -%} product page {%- endcomment -%}
window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
{%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
{%- comment -%} BOLD APPS INSTALLED {%- endcomment -%}
{%- assign bold_apps_installed = shop | map: 'metafields' | map: 'bold_apps_installed' | first -%}
window.BOLD.apps_installed = {{ bold_apps_installed | json }} || {};
{%- unless bold_apps_installed contains 'Product Options' or bold_apps_installed contains 'Customer Pricing' or bold_apps_installed contains 'Product Bundles' or bold_apps_installed contains 'Product Discount' or bold_apps_installed contains 'Quantity Breaks' or bold_apps_installed contains 'Custom Order' or bold_apps_installed contains 'Order Manager' or bold_apps_installed contains 'The Motivator'-%}
{%- comment -%} collection page {%- endcomment -%}
{%- for product in collection.products -%}
window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
{%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
{%- endfor -%}
{%- comment -%} search page {%- endcomment -%}
{%- for product in search.results -%}
window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
{%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
{%- endfor -%}
{%- endunless -%}
{%- comment -%} cart page {%- endcomment -%}
{%- for item in cart.items -%}{%- assign csp_metafield_namespace = item.variant_id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ item.variant_id | json }}, { product_id: {{ item.product.id | json }}, product_handle: {{ item.product.handle | json }}, price: {{ item.variant.price | json }}, group_id: '{{item.variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ item.product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
{%- comment -%} metafields {%- endcomment -%}
window.BOLD.common.Shopify.metafields = window.BOLD.common.Shopify.metafields || {};
{%- assign metafield_namespaces_to_load = 'bold_rp,bold_csp_defaults' | split: ',' -%}
{%- for namespace in metafield_namespaces_to_load -%}
window.BOLD.common.Shopify.metafields[{{ namespace | json }}] = {{ shop.metafields[namespace] | json }};
{%- endfor -%}
window.BOLD.common.cacheParams = window.BOLD.common.cacheParams || {};
</script>
{%- comment -%} INCLUDE APP SCRIPTS BELOW {%- endcomment -%}
//2nd part of JS
{% comment %}
These script tags are DOM templates used by the Multi Currency javascript and should not be modified
{% endcomment %}
<script type="text/template" id="bold-currency-picker-template">
<div class="BOLD-mc-picker multi">
<div class="currentCurrency loading" data-current-currency>
<span class="flag flag-loading" data-flag></span>
<span class="name" data-name>•••</span>
<span class="chevron">
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M13.148 10.398l-1.297 1.289q-0.148 0.148-0.352 0.148t-0.352-0.148l-4.148-4.148-4.148 4.148q-0.148 0.148-0.352 0.148t-0.352-0.148l-1.297-1.289q-0.148-0.148-0.148-0.355t0.148-0.355l5.797-5.789q0.148-0.148 0.352-0.148t0.352 0.148l5.797 5.789q0.148 0.148 0.148 0.355t-0.148 0.355z" /></svg>
</span>
</div>
<ul class="currencyList" data-currency-list></ul>
</div>
</script>
<script type="text/template" id="bold-currency-picker-mount-template">
{%- render 'bold-currency-picker-mount' -%}
</script>
//3rd piece of JS
{% comment %} always ensure the mc_base_url contains a trailing slash {% endcomment %}
{% assign mc_base_url = 'https://mc.boldapps.net/' %}
{% assign mc_shopDomain_url = mc_base_url | append: shop.permanent_domain %}
<script>
// ensure these are available to the global window, for use in the bootstrap js asset
window.BOLD_mc_bootstrapSettings = {
shopDomainUrl: '{{ mc_shopDomain_url }}',
flagsAssetUrl: '{{ 'flags.min.css' | asset_url }}',
pickerCssAssetUrl: '{{ 'bold-currency-picker.css' | asset_url }}',
productOriginalPrice: {{ product.price | default: '' | json }}
};
</script>
<script src="{{ mc_base_url | append: 'install_assets/bold.multicurrency.js' }}" defer></script>
<script src="{{ 'bold-currency-bootstrap.js' | asset_url }}" defer></script>
{%- render 'bold-currency-templates' -%}
//last piece of JS
if (typeof BOLDCURRENCY !== 'undefined' && BOLDCURRENCY.converter && typeof BOLD_mc_bootstrapSettings !== 'undefined') {
BOLD_mc_bootstrap(BOLD_mc_bootstrapSettings);
}
function BOLD_mc_bootstrap(options) {
// inject CSS assets into the head of the document
injectCssAssets([
makeCssLink(options.flagsAssetUrl),
makeCssLink(options.pickerCssAssetUrl)
]);
BOLDCURRENCY.converter.requestRates = function (callback, moneyElements) {
BOLD.helpers.js.get(options.shopDomainUrl + '/rates')
.then(
function (returnedValue) {
if (returnedValue.hasOwnProperty('error')) {
BOLDCURRENCY.enabled = false;
console.info('Bold MultiCurrency: ' + returnedValue.error);
throw(returnedValue.error);
} else {
callback(returnedValue, moneyElements);
BOLDCURRENCY.converter.enableAggressiveRefresh();
}
})
.catch(function (err) {
if (true === options.debug) {
console.log(err);
}
BOLDCURRENCY.converter.hideAllInstances();
});
};
BOLDCURRENCY.converter.postCartDataToCashier = function (cartId, callback, moneyElements) {
BOLD.helpers.js.post(options.shopDomainUrl + '/rates', {'cart_id': cartId})
.then(
function (returnedValue) {
if (returnedValue.hasOwnProperty('error')) {
BOLDCURRENCY.enabled = false;
console.info('Bold MultiCurrency: ' + returnedValue.error);
throw(returnedValue.error);
} else {
if (typeof callback === 'function') {
callback(returnedValue, moneyElements);
BOLDCURRENCY.converter.enableAggressiveRefresh();
}
}
})
.catch(function (err) {
if (true === options.debug) {
console.log(err);
}
BOLDCURRENCY.converter.hideAllInstances();
});
};
if (BOLD && typeof BOLD.helpers !== 'undefined') {
BOLD.helpers.setupMutationObservers = function (target, eventToEmit) {
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
var variantId = parseInt(document.querySelector('select[name=id]').value);
BOLD.helpers.shopify.getVariant(BOLD.helpers.shopify.getProductHandleById(variantId), variantId)
.then(function (data) {
BOLD.common.eventEmitter.emit(eventToEmit, {
selector: target,
variant: data,
originalProductPrice: options.productOriginalPrice
});
});
});
});
var config = {attributes: true, childList: true, characterData: true};
observer.observe(target, config);
};
}
document.addEventListener('DOMContentLoaded', function (event) {
if (window.jQuery && jQuery().on) {
jQuery('.bold_product_page_price').parent().each(function (i, parent) {
BOLD.helpers.setupMutationObservers(parent, 'BOLD_CURRENCY_product_price_updated');
});
}
BOLDCURRENCY.converter.initialize(initPickers());
});
function injectCssAssets(assets) {
assets.forEach(function (asset) {
document.head.appendChild(asset);
});
}
function initPickers() {
var pickerTemplateParent = document.getElementById('bold-currency-picker-template');
var mountpointTemplateParent = document.getElementById('bold-currency-picker-mount-template');
if (null === pickerTemplateParent) {
throw 'No picker template found';
} else if (null === mountpointTemplateParent) {
throw 'No mountpoint template found';
}
// a live HTMLCollection that will automatically reflect DOM updates
var mountpointInstances = document.getElementsByClassName('BOLD-mc-picker-mnt');
if (0 === mountpointInstances.length) {
// inject automatically if necessary
var injectedMount = document.body.appendChild(getElementFromTemplate(mountpointTemplateParent));
addClass(injectedMount, 'injected');
}
var pickerInstances = [];
/** @type {Element} instance **/
Array.prototype.forEach.call(mountpointInstances, function (instance) {
var appendedChild = instance.appendChild(getElementFromTemplate(pickerTemplateParent));
appendedChild.style.display = '';
pickerInstances.push(appendedChild);
});
return pickerInstances;
}
function makeCssLink(href) {
var cssLink = document.createElement('link');
cssLink.type = 'text/css';
cssLink.rel = 'stylesheet';
cssLink.href = href;
return cssLink;
}
/**
* This function requires that the template element contains only one single child element
* (The child element can contain arbitrary content however)
*
* @param {Element} templateElement
* @return {Node} the top-level child element within the template
*/
function getElementFromTemplate(templateElement) {
var tmp = document.createElement('div');
tmp.innerHTML = templateElement.innerHTML.trim();
return tmp.firstChild;
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function addClass(element, className) {
if (!hasClass(element, className)) {
return element.className += ' ' + className;
}
}
}
//end
.BOLD-mc-picker-mnt {
position: relative;
display: inline-block; }
.BOLD-mc-picker-mnt.injected {
position: fixed;
overflow: visible;
z-index: 99999; }
.BOLD-mc-picker > .currentCurrency > .flag, .BOLD-mc-picker > .currencyList > .option > .flag {
background-image: url("https://static.boldcommerce.com/multicurrency/flags.png");
position: absolute;
height: 11px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 6px;
width: 16px; }
.BOLD-mc-picker {
margin-bottom: 0;
white-space: nowrap;
height: 32px;
}
.BOLD-mc-picker * {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.BOLD-mc-picker > .currentCurrency {
position: relative;
display: inline-block;
height: 32px;
line-height: 32px;
width: 80px;
/* border: 1px solid #DDD; */
background: #FFF;
/*-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);*/
padding: 0 0 0 27px;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #1c1b1b !important;
font-family: Montserrat,sans-serif;
font-weight: 600;
font-size: 11px;
font-style: normal;
transition: color 0.2s ease-in-out;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.BOLD-mc-picker > .currentCurrency > .flag.flag-loading {
background: gray;
display: inline-block; }
.BOLD-mc-picker > .currentCurrency > .chevron {
position: absolute;
right: 3px;
top: 53%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 12px;
height: 12px;
display: block;
margin-left: -3px; }
.BOLD-mc-picker > .currentCurrency > .chevron > svg {
position: absolute;
/* top: 0; */
right: 0;
bottom: 2px;
left: 0;
height: 100%;
width: 100%;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s; }
.BOLD-mc-picker > .currencyList {
color: #1c1b1b !important;
font-family: Montserrat,sans-serif;
font-weight: 600;
font-size: 11px;
font-style: normal;
transition: color 0.2s ease-in-out;
letter-spacing: 0.1em;
text-transform: uppercase;
width: 200px;
vertical-align: inherit;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
/* prevent horizontal scrollbars on windows */
overflow-y: auto;
overflow-x: hidden;
max-height: 145px;
/* border: 1px solid #e5e5e5; */
z-index: 111;
list-style: none;
margin: 0;
padding: 0;
display: none !important;
margin-left: 60px;
}
.BOLD-mc-picker > .currencyList > .option {
/* border-bottom: 1px solid #e5e5e5; */
width: 200px;
margin: 0;
padding: 0 0 0 27px;
cursor: pointer;
text-align: left;
float: none;
height: 32px;
line-height: 32px; }
.BOLD-mc-picker > .currencyList > .option:last-child {
border-bottom: none; }
.BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.BOLD-mc-picker.open > .currencyList {
display: block !important; }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker > .currentCurrency > .chevron > svg {
-webkit-transform: rotate(0);
transform: rotate(0); }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker > .currencyList {
bottom: 31px;
top: auto; }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker > .currentCurrency > .chevron > svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
-webkit-transform: rotate(0);
transform: rotate(0); }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker > .currencyList {
top: 31px;
bottom: auto; }
/* Add own CSS to style BOLD currency picker */
@media only screen and (max-width: 767px){
.BOLD-desktop-currency-picker {
display:none;
}
}
@media only screen and (min-width: 768px){
.BOLD-mobile-currency-picker {
display:none;
}
}
.BOLD-sidebar-menu {
margin: 0 0 15px 12px;
}
{% assign openDirection = openDirection | default: 'up' %}
<span style="display:none;" class="BOLD-mc-picker-mnt" data-open="{{openDirection}}" g-bold-mc-picker-mnt></span>