In Shopify.
My site hides prices if the user is not logged in. And I have hidden prices everywhere, but I only have to do it in window.ShopifyAnalytics.meta (meta prices), which is displayed as a json.
I end up seeing this structure:
<script>
window.ShopifyAnalytics = window.ShopifyAnalytics || {};
window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
window.ShopifyAnalytics.meta.currency = 'USD';
var meta = {"product":{
...
};
for (var attr in meta) {
window.ShopifyAnalytics.meta[attr] = meta[attr];
}
</script>
But how do I hide the prices here?
{% if customer == null %}
<script>
window.ShopifyAnalytics = window.ShopifyAnalytics || {};
window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
setTimeout(function()
{
delete window.ShopifyAnalytics.meta.product
}, 100);
</script>
{% endif %}
paste it on the head tag of your theme.liquid.
the value is not yet evaluated before clicking the > to show the object tree on console.log
Related
I have a 3rd. party CRM system from which i am in the process of implementing tracking.
ihave with help, successfully added tracking to the product pages using this:
add_action('wp_head', 'zz_add_tracking_codes');
function zz_add_tracking_codes(){
// adding on product page only
if(is_singular( 'product' )){
$produc_id = get_the_id();
// Remember a product can have multiple categories so if you can only add one you get the frist element form array.
$categories = get_the_terms( $produc_id, 'product_cat');
?>
<script type="text/javascript" language="javascript">
const PRODUCTID = '<?php echo $produc_id; ?>';
const CATEGORYID = '<?php echo $categories[0]->term_id; ?>';
const CATEGORYNAME = '<?php echo $categories[0]->name; ?>';
var hlt;
var BiTrackingLoaded = function (BiTracking) {
hlt=BiTracking;
BiTracking.initialize('INSERTAPIKEYHERE', INSERTSESSIONTIMEHERE);
hlt.visit(PRODUCTID,CATEGORYID,CATEGORYNAME) }
</script>
<script>
(function (d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
h = "https:" == document.location.protocol ? "https://" : "http://";
g.src = h + 'tracking.heycommerce.dk/hlbi.js';
s.parentNode.insertBefore(g, s);
}
(document, 'script'));
</script>
<?php
}
}
What i need to do on the cart page is kind of similar, but i need it to fire an event for each of the products in the cart, and the hlt.visit(PRODUCTID,CATEGORYID,CATEGORYNAME)
is replaced with: hlt.addToBasket(PRODUCTID, PRODUCT COUNT, CATEGORYID, BASKETID, CATEGORYNAME);
Can i somehow reuse the code from the product pages and loop through the items in the cart?
I am trying to add an "Estimated delivery date" section to my shopify store. It shows all of the labels like "Estimated delivery date", "Standard shipping", etc., but it does not show any text where the actual dates are supposed to be. Any ideas what I did wrong?
var date = moment();
var holidays = [{{ settings.holiday_dates }}];
var standardShip = {{ settings.standard_ship_days }};
var expressShip = {{ settings.express_ship_days }};
var range = {{ settings.ship_range }};
var standardDate = addDays(date, standardShip-1);
var expressDate = addDays(date, expressShip-1);
var endStandardRange = addDays(standardDate, range);
var endExpressRange = addDays(expressDate, range);
$('#fromDate').html( standardDate.format('MMMM Do') );
$('#toDate').html( endStandardRange.format('MMMM Do') );
$('#fromDateExpress').html( expressDate.format('MMMM Do') );
$('#toDateExpress').html( endExpressRange.format('MMMM Do') );
function addDays(date, days) {
date = moment(date); // get new instance of date
while (days > 0) {
date = date.add(1, 'days');
var isodate = date.format('YYYY-MM-DD');
// decrease "days" only if it's a sunday or holiday
if ( {% if settings.exclude_sunday %} date.isoWeekday() !== 7 && {% endif %}
{% if settings.exclude_saturday %} date.isoWeekday() !== 6 && {% endif %}
$.inArray(isodate, holidays) == -1) {
days -= 1;
}
}
//alert(date.format('YYYY-MM-DD'));
return date;
};
<p><b><u>Estimated delivery dates (US orders only)</u></b><br>
FREE shipping: <span id="fromDate"></span> - <span id="toDate"></span></p>
<p>Express shipping: <span id="fromDateExpress"></span> - <span id="toDateExpress"></span></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js' | script_tag }}
I need help,
Requirement
when the user types in an input box I want to highlight the link with blue color if any
My Research
when I dig into it, I realize that without using a contenteditable div it's not possible to do, also there is no v-model associated with contenteditable div I am manually updating the state.
so far I have this, courtesy- contenteditable div append a html element and v-model it in Vuejs
<div id="app"><div class="flex">
<div class="message" #input="updateHtml" v-html="html" contenteditable="true"></div>
<br>
<div class="message">{{ html }}</div>
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
html: 'some text',
},
methods: {
updateHtml: function(e) {
this.html = e.target.innerHTML;
},
renderHtml: function(){
this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
}
}
});</script>
Issue
every time user types something, the focus is misbehaving which is strange to me, I want v-html to update along with user types #keyup,#keydown also have the same behavior.it works ok on #blur #focusout events, but that's not what I want
Appreciate Help.Thanks
I figured it out myself. Posting the answer so that may help other developers. v-HTML doesn't do all the trick. You’ll need to store the cursor position so it can be restored properly each time the content updates as well as parse the content so that it renders as expected. Here is the example
HTML
<p>
An example of live syntax highlighting in a content-editable element. The hard part is storing and restoring selection after changing the DOM to account for highlighting.
<p>
<div contentEditable='true' id='editor'>
Edit text here. Try some words like bold and red
</div>
<p>
Just a demo trivial syntax highlighter, should work with any syntax highlighting you want to implement.
</p>
JS
const editor = document.getElementById('editor');
const selectionOutput = document.getElementById('selection');
function getTextSegments(element) {
const textSegments = [];
Array.from(element.childNodes).forEach((node) => {
switch(node.nodeType) {
case Node.TEXT_NODE:
textSegments.push({text: node.nodeValue, node});
break;
case Node.ELEMENT_NODE:
textSegments.splice(textSegments.length, 0, ...(getTextSegments(node)));
break;
default:
throw new Error(`Unexpected node type: ${node.nodeType}`);
}
});
return textSegments;
}
editor.addEventListener('input', updateEditor);
function updateEditor() {
const sel = window.getSelection();
const textSegments = getTextSegments(editor);
const textContent = textSegments.map(({text}) => text).join('');
let anchorIndex = null;
let focusIndex = null;
let currentIndex = 0;
textSegments.forEach(({text, node}) => {
if (node === sel.anchorNode) {
anchorIndex = currentIndex + sel.anchorOffset;
}
if (node === sel.focusNode) {
focusIndex = currentIndex + sel.focusOffset;
}
currentIndex += text.length;
});
editor.innerHTML = renderText(textContent);
restoreSelection(anchorIndex, focusIndex);
}
function restoreSelection(absoluteAnchorIndex, absoluteFocusIndex) {
const sel = window.getSelection();
const textSegments = getTextSegments(editor);
let anchorNode = editor;
let anchorIndex = 0;
let focusNode = editor;
let focusIndex = 0;
let currentIndex = 0;
textSegments.forEach(({text, node}) => {
const startIndexOfNode = currentIndex;
const endIndexOfNode = startIndexOfNode + text.length;
if (startIndexOfNode <= absoluteAnchorIndex && absoluteAnchorIndex <= endIndexOfNode) {
anchorNode = node;
anchorIndex = absoluteAnchorIndex - startIndexOfNode;
}
if (startIndexOfNode <= absoluteFocusIndex && absoluteFocusIndex <= endIndexOfNode) {
focusNode = node;
focusIndex = absoluteFocusIndex - startIndexOfNode;
}
currentIndex += text.length;
});
sel.setBaseAndExtent(anchorNode,anchorIndex,focusNode,focusIndex);
}
function renderText(text) {
const words = text.split(/(\s+)/);
const output = words.map((word) => {
if (word === 'bold') {
return `<strong>${word}</strong>`;
}
else if (word === 'red') {
return `<span style='color:red'>${word}</span>`;
}
else {
return word;
}
})
return output.join('');
}
updateEditor();
Hope this helps...
I made a minicart with popup so when product will add to cart then this side popup opening with added product. I wanted to show color and size variant separately for selection at the cart
here is liquid with js code for this to populate data to cart
{% assign offerProduct = all_products['offer-product'] %}
{% assign product = offerProduct %}
var offerProduct = {{ offerProduct | json }}
// console.log( offerProduct.id);
var offerProductVariants = offerProduct.variants;
var allVariants = [];
if (offerProductVariants.length > 0) {
for (let i = 0; i < offerProductVariants.length; i++) {
allVariants.push(offerProductVariants[i]);
}
}
let selectVar = '<select id="ProductSelect-product-template" class="product-form__variants no-js2" onchange="selectChanged(this.value, ' + line + ', ' + qty + ')" name="id"\n' +
' data-productid="' + item.product_id + '">';
if (allVariants.length > 0) {
for (let i = 0; i < allVariants.length; i++) {
let variant = allVariants[i];
let selected = (variantId == variant.id) ? 'selected' : '';
selectVar += '<option value="' + variant.id + '" ' + selected + '> ' + variant.title + '</option>';
}
}
this showing both color and size with same dropdown like color/size but I want to show this with dirrent dropdown how can i do this
I wanted to add an auto suggest list of students' code into input box
public function autoCodeSuggest()
{
$em = $this->getDoctrine()->getManager();
$query = $em->createQuery("SELECT s.studentLogin FROM AppBundle:StudentLogin s ORDER BY s.studentLogin");
$code = $query->getArrayResult();
$strJavascript = '';
if (!empty($code)){
$strJavascript = '
var ArrayCode = new Array(';
for ($i=0; $i<count($code); $i++){
$strJavascript .= '"'.$code[$i]['studentLogin'].'",';
} // for ($i=0; $i<count($code); $i++)
$n = strlen($strJavascript)-1;
$strJavascript = substr_replace($strJavascript,'',$n); // remove last ,
$strJavascript .= ');';
} // if (!empty($code))
return $strJavascript;
} // end function
in my controller
public function studentSearchAction()
{
$LoginJS = $this->get('utilities_student_tools')->autoCodeSuggest();
return $this->render('student/student_search.html.twig', array(
'LoginJS' => $LoginJS,
));
}
student_search.html.twig contains
{% block body %}
<script language="javascript" type="text/javascript">
{{ LoginJS }}
</script>
{{ include('student_code.html.twig') }}
{% endblock %}
it doesn't work because when I view the source code of my page I have
<script language="javascript" type="text/javascript">
var ArrayCode = new Array("AA0951","AA1825","AA2802","AA2886","AA3418",.....
</script>
when I add a \ to the javascript code generator
$strJavascript .= '\"'.$code[$i]['studentLogin'].'\",';
the output become
var ArrayCode = new Array(\"AA0951\",\"AA1825\",\"AA2802\",\"AA2886\"
It works if the output is like
var ArrayCode = new Array("AA0951","AA1825","AA2802","AA2886",
the " is converted to " .
How can I avoid the conversion in twig?
I just find the answer.
{{ LoginJS|raw }}