Skip to content

Instantly share code, notes, and snippets.

{"component":{"name":"ct_div_block","id":104,"options":{"nicename":"Accordion Basic","selector":"div_block-104-210","ct_id":104,"ct_parent":0},"children":[{"id":105,"name":"ct_div_block","options":{"ct_id":105,"ct_parent":104,"selector":"div_block-105-210","original":{"custom-attributes":[{"name":"data-accordion-multi-collapsable","value":"false","pinned":true},{"name":"data-accordion-transition-duration","value":"0.3s","pinned":true},{"name":"data-accordion-center","value":"false","pinned":true},{"name":"data-accordion-anchor","value":"20px"}],"gap":"15"},"nicename":"Accordions","classes":["x-accordions"],"nth-child(2) .ct-div-block":[],"nth-child(n) .x-accordion:nth-child(2) .ct-div-block":[],"nth-child(n) .x-accordion .ct-div-block:nth-child(2)":[]},"depth":2,"children":[{"id":106,"name":"ct_div_block","options":{"ct_id":106,"ct_parent":105,"selector":"div_block-106-210","original":{"custom-attributes":[{"name":"data-accordion","value":"open","pinned":true}]},"nicename":"Accordion","classes":["x-accordion"
This element works as follows: there are several key classes like x-mega,
and within this, you can use x-mega-activate to activate the mega menu.
Additionally, you can use x-mega-activate and x-mega-deactivate to activate
or deactivate the menu, respectively.
x-mega contains some key attributes that you can use to configure the mega menu,
such as data-mega-open, which lets you activate the menu with a click or hover.
There is also data-mega-transition, which you can set, for example, to 0.5s to
define the animation duration. Similarly, there is data-mega-scroll, which you
@hssktm
hssktm / gist:5ffd5ee6b0cb4d2152e1fa1c836c796e
Created March 21, 2025 05:23
MEGA MENU MODERN OXYGEN
JSON Header and Menu
{"component":{"id":53,"name":"ct_div_block","options":{"ct_id":53,"ct_parent":0,"selector":"div_block-53-125","original":{"useCustomTag":"true","tag":"header","width":"100","width-unit":"%","position":"fixed","top":"10","z-index":"9999"},"nicename":"Header"},"depth":1,"children":[{"id":3,"name":"ct_div_block","options":{"ct_id":3,"ct_parent":53,"selector":"div_block-3-125","original":{"width":"max-content","width-unit":" ","useCustomTag":"true","tag":"nav","flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","background-color":"#303030","border-radius":"1","border-radius-unit":"rem","padding-right":"6","padding-left":"6","height":"50","margin-left-unit":"auto","margin-right-unit":"auto","position":"relative","gap":"1","gap-unit":"rem"},"nicename":"Nav","activeselector":false,"media":{"tablet":{"original":{"width":"90","width-unit":"%"}}}},"depth":2,"children":[{"id":7,"name":"ct_div_block","options":{"ct_id":7,"ct_parent":3,"selector":"div_block
{"component":{"id":11,"name":"ct_div_block","options":{"ct_id":11,"ct_parent":2,"selector":"div_block-11-263","original":{},"nicename":"Lists","activeselector":"oxel_icon-list","classes":["oxel_icon-list"]},"depth":3,"children":[{"id":6,"name":"ct_div_block","options":{"ct_id":6,"ct_parent":11,"selector":"div_block-6-263","original":{},"nicename":"List","activeselector":"oxel_icon-list__item","classes":["oxel_icon-list__item"],"last-of-type .oxel_icon-list__item-flex-line":{}},"depth":4,"children":[{"id":7,"name":"ct_div_block","options":{"ct_id":7,"ct_parent":6,"selector":"div_block-7-263","original":{},"nicename":"Icon Wrap","activeselector":"oxel_icon-list__item-flex","classes":["oxel_icon-list__item-flex"],"last-of-type .oxel_icon-list__item-flex-line":{}},"depth":5,"children":[{"id":9,"name":"ct_fancy_icon","options":{"ct_id":9,"ct_parent":7,"selector":"fancy_icon-9-263","original":{"icon-id":"FontAwesomeicon-circle-o"},"nicename":"Icon","activeselector":"oxel_icon-list__item-flex-icon","classes":["oxel_
@hssktm
hssktm / Element Oxygen Builder Load More
Last active December 20, 2024 03:03
Element Oxygen Builder Load More
{"component":{"id":329,"name":"ct_div_block","options":{"ct_id":329,"ct_parent":3,"selector":"div_block-329-77","original":[],"nicename":"Element Load More"},"depth":4,"children":[{"id":330,"name":"ct_div_block","options":{"ct_id":330,"ct_parent":329,"selector":"div_block-330-77","original":{"custom-attributes":[{"name":"data-load-more-selector","value":"#id-and-class","pinned":true},{"name":"data-load-more","value":"click","pinned":true},{"name":"data-load-more-animation","value":"x-fadeZoomOut","pinned":true},{"name":"data-load-more-animation-initial","value":"false","pinned":true}],"custom-css":"","text-align":"left","flex-direction":"row","display":"flex","gap":"10","padding-top":"10","padding-bottom":"10","padding-left":"20","padding-right":"20","align-items":"center","border-radius":"100","background-color":"#5b2ae0","color":"#ffffff"},"nicename":"Load More","classes":["x-load-more"],"activeselector":false},"depth":5,"children":[{"id":331,"name":"ct_text_block","options":{"ct_id":331,"ct_parent":330,"se
@hssktm
hssktm / EndPoint Api Template Oxygen Builder
Created October 5, 2024 19:07
EndPoint Api Template Oxygen Builder
add_action('rest_api_init', function () {
register_rest_route('api-oxygen/v1', '/oxygen-content/(?P<id>\d+)', array(
'methods' => 'GET',
'callback' => 'call_oxygen_content_api',
));
});
function call_oxygen_content_api($data) {
$post_id = $data['id'];
@hssktm
hssktm / Maintenance Mode
Last active October 6, 2024 02:26
Maintenance Mode
function custom_maintenance_mode_setting() {
add_settings_section(
'maintenance_mode_section',
'Maintenance Mode',
null,
'general'
);
add_settings_field(
'maintenance_mode',
@hssktm
hssktm / Oxygen Builder Temporary Cookies Modal JSON
Created September 10, 2024 22:22
Oxygen Builder Temporary Cookies Modal JSON
{"component":{"id":141,"name":"ct_div_block","options":{"ct_id":141,"ct_parent":100004,"selector":"div_block-141-109","original":{"width":"100","width-unit":"%"},"nicename":"Temporary Cookies Modal"},"depth":5,"children":[{"id":5,"name":"ct_code_block","options":{"ct_id":5,"ct_parent":141,"selector":"code_block-5-109","original":{"code-js":"document.addEventListener('DOMContentLoaded', function() {\n var cookieName = \"oxyModalCokkies\";\n var modals = document.querySelectorAll('.oxy-modal-cokkie');\n var closeButtons = [];\n\n if (localStorage.getItem(cookieName) && !sessionStorage.getItem(cookieName)) {\n document.cookie = cookieName + \"=; path=/; max-age=0\";\n localStorage.removeItem(cookieName);\n }\n\n if (document.cookie.split(';').some((item) => item.trim().startsWith(cookieName + '='))) {\n modals.forEach(modal => {\n if (modal && modal.parentElement) {\n modal.parentElement.remove();\n }\n });\n }\n\n modals.fo
@hssktm
hssktm / Element QuickView for Oxygen Builder
Last active September 25, 2024 03:07
Element QuickView for Oxygen Builder
/*Paste this code into a plugin like Code Snippets or the one of your choice */
function oxy_call_id_quickview() {
if (isset($_GET['quickterm']) && !empty($_GET['quickterm'])) {
return sanitize_text_field($_GET['quickterm']);
} else {
$args = array(
'post_type' => 'product',
'posts_per_page' => 1,
'orderby' => 'date',
'order' => 'ASC'
@hssktm
hssktm / Wishlist Oygen Builder
Last active March 13, 2025 08:13
Contains JSON and Code to paste into code plugin
//JSON OXYGEN BUILDER
{"component":{"id":216,"name":"ct_div_block","options":{"ct_id":216,"ct_parent":100004,"selector":"div_block-216-53","original":{"padding-bottom":"0"},"nicename":"Wishlist Elements","activeselector":false},"depth":5,"children":[{"id":217,"name":"ct_code_block","options":{"ct_id":217,"ct_parent":216,"selector":"code_block-217-53","nicename":"Code Wishlist Paste Global","activeselector":false,"original":{"code-php":"<script>\n\ndocument.addEventListener('DOMContentLoaded', function() {\n if (window.angular) return;\n assignButtonEvents();\n\n function assignButtonEvents() {\n const wishlistButtons = document.querySelectorAll('.oxy-add-to-wishlist, .oxy-remove-from-wishlist');\n\n wishlistButtons.forEach(button => {\n button.removeEventListener('click', handleWishlistButtonClick);\n button.addEventListener('click', handleWishlistButtonClick);\n });\n }\n\n function handleWishlistButtonClick(event) {\n const button = event.cur