Code dump

This page contains a mix of random helpful codes. I will make a more organized page later on.


Adding a disclaimer above "Checkout" button in the cart

<script>

// Only change what's within quotations! 
// If you want to use quotations in your text, you have to write this for each quotation: \"

// Type the text you want to display. 
var text = "This is the text which will display above the Checkout button";
// Type the color or use a #HEX code
var color = "yellow";
// "normal", "bold", or type a number from "100" to "1000".
var weight = "bold";
// "left", "center", "right"
var position = "right";
// Anything from "0.0". "1.0" is normal Higher than "2.5" is not recommended
var size = "1.2";



// The code - do not change this unless you know what you're doing
var styles = "color:" + color + ";font-weight:" + weight + ";text-align:" + position + ";font-size:" + size + "rem;";
document.addEventListener("DOMContentLoaded", function() {
  if (/cart/.test(wnd.fe.Location.href)) {
    var table = document.getElementsByClassName("eshop-cart-table")[0];
    var element = document.createElement("div");
    element.setAttribute('style', styles + "padding-top:10px;");
    var content = document.createTextNode(text);
    element.appendChild(content);
    table.appendChild(element);
    document.querySelector('.eshop-cart-checkout').setAttribute('style','padding-top:10px;');
    document.querySelector('.eshop-cart-continue').setAttribute('style','padding-top:10px;');    
  }
});

</script>

Insert the code into:
SETTINGS - Website settings - HTML Footer
It's important that you add it to the footer, because the website has to load first for the script to be able to change anything on the website.

This script contains instructions for what to change to edit the text and its style.

This can be good for certain things, such as informing the user about possibility of sending in a comment about the order after the order is complete. You can add a form on the /order-complete/ page where you ask the for customers e-mail address and comment.


Automatically add text and link to the text you copy from a website

<script>
function addLink() {
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + this.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');

    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}

document.addEventListener('copy', addLink);
</script>

Whenever a visitor of the website copies any text which is on the website, an extra line will be added to the bottom of what was copied. It will say: 

Read more at: link-to-website.com

Just try copying anything from this page and paste it somewhere else.


No-follow on ALL links on the website

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script> $(document).ready(function() { $('a').attr('rel','nofollow'); }); </script>

Insert into SETTINGS > Website settings > HTML header. The first <script> block activates the library jQuery. The second <script> block specifies that all 'a' elements should have an attribute called 'rel' that has 'nofollow' as a value.


Change background picture for mobile phones where there is a video background

<style>
@media (max-width: 767px) {
   .section-bg-layer>div {
       background: url(https://nordic-berries.com/_files/200000279-6cffe6df92/picture.jpg);
       background-size: cover;
       background-position: center;
       z-index: 999;
    }

   .section-bg-layer>div img {display: none !important;}
}
</style>

Update the highlighted URL with the address to the picture. You should upload the picture that the user wants to have as a background for mobile devices on a hidden page on the users project as a file, then copy the address to the file to use in the code above. Put it under PAGES > Home > SEO > HTML in header.


Change text for the Add to cart button in E2

<script>document.querySelector('.product-cart-text').innerHTML = "Buy";</script>

Replace where I wrote Buy, copy the entire blue block, and paste it into SETTINGS > Website settings > Website footer HTML

Change Cart button in the menu in E2

<script>document.querySelector('.cart-text').innerHTML = "Carty";</script>

Replace where I wrote Carty, copy the entire blue block, and paste it into SETTINGS > Website settings > Website footer HTML. 

Change More for drop downs in the menu (W2 + E2)

<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function(){
    document.querySelector('.more span').innerHTML = "More!!"
  }, 1000)
})
</script>

Replace More!! with whatever you want, and paste it into SETTINGS > Website settings > Website footer HTML. 

You might notice a timeout there of 1000 milliseconds (1 second). It's the only way I was able to edit this particular string. The page will have to load, so the change will apply for everyone who is able to load the page within 1 second. Increase or decrease if you feel it's necessary.


Redirect to another page (internal or external)

You can insert this into the HTML header field under PAGES to send the visitor to a different website. The website can be another one in the same project, or it can be a completely different website.
Just replace https://google.com/ with whatever you want the page to be redirected to. This can for example be useful for  a user who wants to set a different page on their website as the homepage. Don't forget to have https:// or https:// in the beginning!
<script>this.location="https://google.com/"</script>

"Login field" for specific registered users - goes to the page you write here

This is a code that is useful for people who wants to have pages for specific people. Create pages and hide them from the menu. If you then write the link to the page /sitename/ you will go to that page.

<form name="pageFind" action="javascript:location.href = window.document.pageFind.page.value" style="margin:0;">
    <div style="display:inline;">
        <input type="text" name="page">
        <input type="submit" value="Go">
        <noscript>
            <div style="display:inline;color:#ff0000; background-color:#ffff66; font:normal 11px tahoma,sans-serif;">
                <p>Javascript is required to access this area. Yours seems to be disabled.</p>
            </div>
        </noscript>
    </div>
</form>

Call on click (or touch, as it fits more for mobile) by using tel:

<a href="tel:12345678">Call me</a>

Update: You can actually just add "tel:00420123456789" as a link to the phone number. It works the same for email, but email uses the prefix "mailto:".


Change section size to 100% of backgrounds height 

For youtube video background:

This is useful when a user wants to have a section to be a set height - the height of the video background.

<style> 
  iframe[data-my_videos="youtube"] {
    height:100% !important;
  }
</style>

Share icons (FB and IG). Insert into Footer. Preview

<style>
.social-box img {max-height: 30px;padding: 0px 3px;}.social-box a{text-decoration:none}.social-box{margin:5px 0px 0px 0px;}
</style>
<div align="center" class="social-box">
<a href="https://www.facebook.com/XXXXXXXXXXXX" target="_blank">
   <img src="https://i.imgur.com/SJeEKuP.png" alt="Facebook group">
</a>
<a href="https://www.instagram.com/XXXXXXXXXXXX" target="_blank">
   <img src="https://i.imgur.com/6RuIBGG.png" alt="Instagram page">
</a>
</div>

Make pages in menu which has subpages unclickable (and only hoverable)

<script>
var itemWithDropdown = Array.from(document.querySelectorAll('.wnd-with-submenu'))
for(var i < itemWithDropdown.length; i++) {
  itemWithDropdown[i].setAttribute('href', ')
  itemWithDropdown[i].style.cursor = "default"
}
</script>

This is useful if you don't want to have to make a separate design for a page which only serves as a category in your menu. Example:

Cute animals
- Cats
- Dogs
- Pigs

Whenever you click on Cute animals, nothing happens. You will only be able to open Cats, Dogs and Pigs when clicking on them. The Cute animals page still exists and can be found in Google (unless you disable it in PAGES), and also via URL, unless you set up a script for URL forwarding on that page.

Place the code in SETTINGS - Website settings - HTML code header


Remove map in the template which has it forced in the footer

<style>.footer-01.design-01 .column-box:nth-child(3n+3) {display: none;}</style>

Change e-shop language to Polish (partially)

Place the code in SETTINGS - Website settings - HTML FOOTER (not header)

This will change all English strings to Polish, except for "More" which shows in the menu, and what shows when the customer of the e-shop is filling in their details for the purchase. These pages are not possible to edit as of now.

You can also use this script to translate things which you cannot edit in the editor to another unsupported language.

You can see working example here - just change to polish language

No changes will be made to the checkout process, as we cannot edit this part with codes.

  
<script>
document.addEventListener("DOMContentLoaded", function(e){
  var language = document.querySelector('html').lang;
  if(language == 'pl'){

    var changes = {

        // Important: Only update the text phrases on the right side inside the quotations

        //All pages
        "cart empty text":              "<strong>Twój koszyk jest teraz pusty.</strong><br>Możesz to zmienić! Wybierz coś miłego.",
        "cart text in menu":            "Koszyk",
        "language selection title":     "Język",
        "collections title":	        "Kolekcje",

        //Shopping cart  (empty cart)
        "continue shopping button":     "Kontunuuj zakupy",
        "checkout button":              "Zamów teraz",

        //Shopping cart (above products in cart)
        "product":                      "PRODUKT",
        "price":                        "CENA",
        "quantity":                     "ILOŚĆ",
        "total":                        "SUMA",

        //Inside products
        "add to cart button":           "Dodaj do koszyka",
        "added to cart text":           "Dodaj do koszyka",
        "product out of stock":         "Obecnie brak na stanie",
        "product variants text":        "Wybierz wariant"

      }

    

    //Magic below. Do not change if you don't know how to work with javascript
    var entries = Object.entries(changes);
    function setElement(elm, val){
        val = String(val);
        var div = document.querySelector(elm);
        if (div != null){return div.innerHTML = val}
    }
    function swap(o, n){if(label === o)label = n;}
    for([label, text] of entries){ 
      swap("cart text in menu", "cart-text");
      swap("cart text in menu", "cart-text");
      swap("language selection title", "lang-title");
      swap("cart empty text", "wnd-empty-placeholder > p");
      swap("continue shopping button", "eshop-cart-continue > a > span");
      swap("checkout button", "eshop-cart-checkout > a > span");
      swap("product", "eshop-cart-product");
      swap("price", "eshop-cart-price");
      swap("quantity","eshop-cart-quantity");
      swap("total", "eshop-cart-sum");
      swap("add to cart button", "product-cart-text");
      swap("added to cart text", "product-cart-added");
      swap("product out of stock","product-cart-out-of-stock");
      swap("product variants text", "product-variants-title");
      swap("collections title", "eshop-filter-category h3");
      setElement('.'+label , text);
    }

  }  
});
</script>

Swap comma and period in decimal placements in E2 product prices

<script>
var oldPrices = Array.from(document.querySelectorAll('.wnd-product-price'))
var oldBeforePrices = Array.from(document.querySelectorAll('.wnd-product-comparative-price-content'))
var allPrices = oldPrices.concat(oldBeforePrices)
allPrices.forEach(function(price){
  price.innerHTML = price.innerHTML.replace(/[,.]/g, function(character) { return character === '.' ? ',' : '.' })
})
</script>

Place the code in SETTINGS - Website settings - HTML FOOTER (not header)

Add links to areas you normally cannot add links (like in the footer) - advanced

<script>
var settings = {
  type: 'email', // 'email' or 'link'
  find: 'my email address', // what you've already written in the footer. Can be anything, but must be exactly the same as whats in the footer.
  address: 'chefs@cafetumble.com', // website address or email account that the link should lead to
  placeholder: 'Send me an email', // clickable text. Can also be the email address or link
  selector: '#footer .inline-text' // wrapper that contains what you wrote in "find" - can be found in Chrome dev tools
}



// Don't edit whats below unless you know what you're doing
var link = function(type) {
  switch (type) {
    case 'email': return "mailto:" + settings.address
    case 'link': return settings.address
    default: {
      console.error('Error in setting up link - incorrect type')
      break;
    }
  }
}

var footerText = document.querySelector(settings.selector)
footerText.innerHTML = footerText.innerHTML.replace(
  settings.find, 
  '<a href="' + link(settings.type) + '">' + settings.placeholder + '</a>')
</script>

Here you can update what's in the settings object (type, find, address, placeholder and selector) to do what you want in the footer (or any other place on the website where you cannot normally add links). 

Type: This can only either be link or email. This depends on if the link you are adding will be to an email address, or a link on the internet.

Find: This is whatever text that is already written there. It's case sensitive, so for the script to be able to find it, it needs to be exactly the same.

Address:  This needs to be either the email address or link address to where the link should lead. If it's an email address, it will open the default program for sending emails when clicked.

Placeholder: This is the text it instead will use instead of what is now in the find field. It can be the same as what's already in find. Up to you.

Selector: This is the most difficult part. Here you will have to dig into the Chrome developer tools (or any inspector that can see the source code of the page), to find out where the text you want to add a link to actually exists. If the text is inside the footer, it will most likely contain #footer and then a class of the container which holds the text. If this sounds a bit too advanced, I recommend you to take a quick course about basics in HTML, CSS and Javascript.


When you've inserted everything, you can add the code to SETTINGS - Website settings - HTML header and footer - HTML Footer (not header!)

Check out the presentation here