{"id":10419,"date":"2015-12-15T13:45:10","date_gmt":"2015-12-15T10:45:10","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=10419"},"modified":"2025-07-03T11:07:07","modified_gmt":"2025-07-03T09:07:07","slug":"using-jquery-for-the-development-of-guest-wish-list-extension","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html","title":{"rendered":"Using Jquery for the Development of Guest Wish List Extension"},"content":{"rendered":"\n<p>In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.<\/p>\n<p>The first thing that we should know about Magento 2.0 is that unlike Magento 1.x it contains several popular frameworks such as Prototype, jQuery + plugins, Angular etc.<!--more--><\/p>\n<p>You may ask why so many, it can cause overload and you won&rsquo;t even need half of them!<\/p>\n<p>But it&rsquo;s not true. Magento 2.0 analyzes JS scripts and enables only those that are pre-defined.<\/p>\n<p>But how can it be done?<\/p>\n<p>One of the methods is to use the command <strong>require:<\/strong><\/p>\n<pre class=\"lang:php decode:true\">require([\"jquery\",\"jquery\/jquery.cookie\",&rdquo;&lt;Other plugins&gt;&rdquo;], function(jQuery){\r\n\tvar wishlist = jQuery.cookie('guestwishlist'); \/\/ Getting data from Cookies\r\n});\r\n<\/pre>\n<p>Now we know how to use jQuery and it&rsquo;s time to use it for adding extra content to page.<\/p>\n<p>Magento 2.0 uses new template that is called Luma. One of the best innovations is to use the <strong>data<\/strong> attributes in html.<\/p>\n<p>These attributes can be easily transferred from default template to customized one without affecting designer&rsquo;s idea.<\/p>\n<p>How can it be used in Scripts?<\/p>\n<pre class=\"lang:php decode:true \">require([\"jquery\",\"jquery\/jquery.cookie\",&rdquo;&lt;Other plugins&gt;&rdquo;], function(jQuery){\r\n\tjQuery(document).ready(function{\r\n\t\tjQuery.getJSON(url,params, function(data){\r\n\t\t\tjQuery('[data-role=compare-products-link]').before(data.wihlist.link);\r\n\t\t});\r\n\t})\r\n});\r\n<\/pre>\n<p>In this script we can see that we use the connection to <strong>[data-role=compare-products-link] <\/strong>for adding new button near &ldquo;Compare Products&rdquo;.<\/p>\n<p><strong>Before:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"lazy aligncenter wp-image-10420 size-belvg-post-content\" src=\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" data-src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/12\/before-850x109.png\" alt=\"before 850x109\" width=\"850\" height=\"109\" title=\"Using Jquery for the Development of Guest Wish List Extension\"><\/p>\n<p><strong>After:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"lazy aligncenter wp-image-10421 size-belvg-post-content\" src=\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" data-src=\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/12\/after-850x96.png\" alt=\"after 850x96\" width=\"850\" height=\"96\" title=\"Using Jquery for the Development of Guest Wish List Extension\"><\/p>\n\n","protected":false},"excerpt":{"rendered":"In this article I will tell you how to use jQuery and we will analyze &#8230;","protected":false},"author":50,"featured_media":10422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389],"tags":[],"class_list":["post-10419","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Oleg Semenov\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#article\",\"name\":\"Using Jquery for the Development of Guest Wish List Extension | BelVG Blog\",\"headline\":\"Using Jquery for the Development of Guest Wish List Extension\",\"author\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/oleg-semenov#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Magento-2.0-Tips-blog_guest-wishlist.jpg\",\"width\":737,\"height\":200},\"datePublished\":\"2015-12-15T13:45:10+02:00\",\"dateModified\":\"2025-07-03T11:07:07+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage\"},\"articleSection\":\"Magento, Magento 2 Development, Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento#listItem\",\"name\":\"Magento\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento#listItem\",\"position\":2,\"name\":\"Magento\",\"item\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#listItem\",\"name\":\"Using Jquery for the Development of Guest Wish List Extension\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#listItem\",\"position\":3,\"name\":\"Using Jquery for the Development of Guest Wish List Extension\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/category\\\/magento#listItem\",\"name\":\"Magento\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\",\"name\":\"BelVG Blog\",\"description\":\"Magento and Prestashop articles\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/oleg-semenov#author\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/oleg-semenov\",\"name\":\"Oleg Semenov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/316f0b410659190b56484ecdb7a98dce16a901ebe753c233c0f407ba96e81b1a?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Oleg Semenov\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html\",\"name\":\"Using Jquery for the Development of Guest Wish List Extension | BelVG Blog\",\"description\":\"In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/oleg-semenov#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/author\\\/oleg-semenov#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Magento-2.0-Tips-blog_guest-wishlist.jpg\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html\\\/#mainImage\",\"width\":737,\"height\":200},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/using-jquery-for-the-development-of-guest-wish-list-extension.html#mainImage\"},\"datePublished\":\"2015-12-15T13:45:10+02:00\",\"dateModified\":\"2025-07-03T11:07:07+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/belvg.com\\\/blog\\\/\",\"name\":\"BelVG Blog\",\"description\":\"Magento and Prestashop articles\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/belvg.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Using Jquery for the Development of Guest Wish List Extension | BelVG Blog","description":"In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.","canonical_url":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#article","name":"Using Jquery for the Development of Guest Wish List Extension | BelVG Blog","headline":"Using Jquery for the Development of Guest Wish List Extension","author":{"@id":"https:\/\/belvg.com\/blog\/author\/oleg-semenov#author"},"publisher":{"@id":"https:\/\/belvg.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/12\/Magento-2.0-Tips-blog_guest-wishlist.jpg","width":737,"height":200},"datePublished":"2015-12-15T13:45:10+02:00","dateModified":"2025-07-03T11:07:07+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage"},"isPartOf":{"@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage"},"articleSection":"Magento, Magento 2 Development, Image"},{"@type":"BreadcrumbList","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/belvg.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento#listItem","name":"Magento"}},{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento#listItem","position":2,"name":"Magento","item":"https:\/\/belvg.com\/blog\/category\/magento","nextItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#listItem","name":"Using Jquery for the Development of Guest Wish List Extension"},"previousItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#listItem","position":3,"name":"Using Jquery for the Development of Guest Wish List Extension","previousItem":{"@type":"ListItem","@id":"https:\/\/belvg.com\/blog\/category\/magento#listItem","name":"Magento"}}]},{"@type":"Organization","@id":"https:\/\/belvg.com\/blog\/#organization","name":"BelVG Blog","description":"Magento and Prestashop articles","url":"https:\/\/belvg.com\/blog\/"},{"@type":"Person","@id":"https:\/\/belvg.com\/blog\/author\/oleg-semenov#author","url":"https:\/\/belvg.com\/blog\/author\/oleg-semenov","name":"Oleg Semenov","image":{"@type":"ImageObject","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/316f0b410659190b56484ecdb7a98dce16a901ebe753c233c0f407ba96e81b1a?s=96&d=mm&r=g","width":96,"height":96,"caption":"Oleg Semenov"}},{"@type":"WebPage","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#webpage","url":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html","name":"Using Jquery for the Development of Guest Wish List Extension | BelVG Blog","description":"In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/belvg.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#breadcrumblist"},"author":{"@id":"https:\/\/belvg.com\/blog\/author\/oleg-semenov#author"},"creator":{"@id":"https:\/\/belvg.com\/blog\/author\/oleg-semenov#author"},"image":{"@type":"ImageObject","url":"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/12\/Magento-2.0-Tips-blog_guest-wishlist.jpg","@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html\/#mainImage","width":737,"height":200},"primaryImageOfPage":{"@id":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html#mainImage"},"datePublished":"2015-12-15T13:45:10+02:00","dateModified":"2025-07-03T11:07:07+02:00"},{"@type":"WebSite","@id":"https:\/\/belvg.com\/blog\/#website","url":"https:\/\/belvg.com\/blog\/","name":"BelVG Blog","description":"Magento and Prestashop articles","inLanguage":"en-US","publisher":{"@id":"https:\/\/belvg.com\/blog\/#organization"}}]}},"aioseo_meta_data":{"post_id":"10419","title":"Using Jquery for the Development of Guest Wish List Extension | #site_title","description":"In this article I will tell you how to use jQuery and we will analyze how to implement your own html for frontend.","keywords":null,"keyphrases":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-11-03 18:37:36","updated":"2026-11-03 18:37:36"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/belvg.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/belvg.com\/blog\/category\/magento\" title=\"Magento\">Magento<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUsing Jquery for the Development of Guest Wish List Extension\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/belvg.com\/blog\/"},{"label":"Magento","link":"https:\/\/belvg.com\/blog\/category\/magento"},{"label":"Using Jquery for the Development of Guest Wish List Extension","link":"https:\/\/belvg.com\/blog\/using-jquery-for-the-development-of-guest-wish-list-extension.html"}],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts\/10419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/comments?post=10419"}],"version-history":[{"count":-4,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/posts\/10419\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/media\/10422"}],"wp:attachment":[{"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/media?parent=10419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/categories?post=10419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/belvg.com\/blog\/wp-json\/wp\/v2\/tags?post=10419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}