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 }}
Related
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
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 am trying to perform credit card validator i.e adding space after every fourth digit like 1111 1111 1111 1111. But somehow I can't get work done.
Here is what I have tried.
Thank you in advance
html
<ion-item>
<ion-label position="floating">Card number</ion-label>
<ion-input type ="tel" formControlName = "cardnumber" keypress ="cc_format($evet)" ></ion-input>
</ion-item>
ts
cc_format(value) {
var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
var matches = v.match(/\d{4,16}/g);
var match = matches && matches[0] || ''
var parts = []
for (let i=0, len=match.length; i<len; i+=4) {
parts.push(match.substring(i, i+4))
}
if (parts.length > 0) {
return parts.join(' ')
} else {
return value
}
}
First let's use ionChange to get the changed value from your input. Connect your input with the creditCardNumber defined in the ts file. Now convert the credit card number and add it to the dynamic variable.
<ion-item>
<ion-label position="floating">Card number</ion-label>
<ion-input type ="tel" formControlName="cardnumber" (ionChange)="cc_format($event.target.value)" [(ngModel)]="creditCardNumber"></ion-input>
</ion-item>
creditCardNumber: string;
cc_format(value: string) {
const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
const matches = v.match(/\d{4,16}/g);
const match = (matches && matches[0]) || '';
const parts = [];
for (let i = 0, len = match.length; i < len; i += 4) {
parts.push(match.substring(i, i + 4));
}
if (parts.length > 0) {
this.creditCardNumber = parts.join(' ');
} else {
this.creditCardNumber = value;
}
}
For my table, below is the code to display its components:
<tbody style="border-bottom:#dbb100 1px" v-for="(item,itm_index) in itemList" :key="itm_index.id" >
<tr class="left-align">
<td>{{item.name}}</td>
<td v-for="(day, day_index) in days" :key="day_index.id" v-if="getTotalWork(itm_index, day_index)==true">{{newValue}}</td>
</tr>
</tbody>
And this is my method that supposedly updates the value on it's corresponding rows and columns.
getTotalWork(item_index, day_index) {
let item = this.itemList[item_index];
let day = this.days[day_index];
let getDate = this.template.date;
item = item.name;
if(this.costList.length > 0){
if(day < 10) day = '0'+day;
var searchItem = this.costList.find(emp => emp.name === item);
if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
this.newValue = searchItem.total_work;
}else{
this.newValue = 0;
}
}
return true;
},
My problem now is that, instead of updating it's corresponding columns and rows only, it updates all of it with one value which is the value of an item. Below is the sample output:
My question is, how can I just update the corresponding cell only based on the item_index and day_index passed value. Passed value of this parameters are row and column headers. Expected output should not be 499 only, there should be like other digits.
Any idea how can I attain this? Been stucked here for almost a day and haven't found any luck in my searches.
EDIT
I don't know how to make a fiddle but the output is like this when I console.log(this.costList):
1:
date: "2018-07-01"
name:"John Doe"
total_work:240
2:
date: "2018-07-02"
name:"John Doe"
total_work:242
3:
date: "2018-07-03"
name:"John Doe"
total_work:243
You should make getTotalWork to return value and place it in output:
<tbody style="border-bottom:#dbb100 1px" v-for="(item,itm_index) in itemList" :key="itm_index.id" >
<tr class="left-align">
<td>{{item.name}}</td>
<td v-for="(day, day_index) in days" :key="day_index.id">{{getTotalWork(itm_index, day_index)}}</td>
</tr>
</tbody>
So your function will be something like this:
getTotalWork(item_index, day_index) {
let item = this.itemList[item_index];
let day = this.days[day_index];
let getDate = this.template.date;
item = item.name;
//MAX SINEV's answer
if(this.costList.length > 0){
if(day < 10) day = '0'+day;
var searchItem = this.costList.find(emp => emp.name === item);
if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
return searchItem.total_work;
}else{
return 0;
}
}
return 0;
}
OP's REVISION:
if(this.costList.length > 0){
if(day < 10){
day = '0'+day;
}
//this.monthYear contains year and date in yyyy-mm format
var searchItem = this.costList.find(emp => emp.name === item.name && emp.date == this.monthYear+'-'+day);
if(typeof searchItem != 'undefined'){
return searchItem.total_work;
}
}
return 0;
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 }}